<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
<div id="app">
    <router-link to="/home">主页</router-link>
    <router-link to="/product">产品</router-link>
    <router-view></router-view>
</div>
<script src="./node_modules/vue/dist/vue.js"></script>
<script src="node_modules/vue-router/dist/vue-router.js"></script>
<script>
    let router=new VueRouter({
        routes:[
            {
                path:'/home',
                component:{
                    template: `<h1>主页</h1>`
                }
            },
            {
                path:'/product',
                component: {
                    template:`
                        <div>
                            <h1>产品</h1>
                            <router-link to="/product/product1">产品1</router-link>
                            <router-link to="/product/product2">产品2</router-link>
                            <router-view></router-view>
                        </div>
                    `,
                    beforeRouteEnter(to,from,next){
                        console.log("进入到产品详情的路由");
                        next();
                    },
                    beforeRouteUpdate(to,from,next){
                        console.log("路由更新的时候");
                        next();
                    },
                    // 路由离开的时候
                    beforeRouteLeave(to,from,next){
                        console.log("离开产品详情的路由");
                        next();
                    }
                },
                children:[
                    {
                        path:'/product/product1',
                        component:{
                            template:`<h2>产品1</h2>`
                        }
                    },
                    {
                        path:'/product/product2',
                        component:{
                            template:`<h2>产品2</h2>`
                        }
                    }
                ]
            }
        ]
    })
    let vm = new Vue({
        el: "#app",
        data: {
        },
        router,
    })
</script>
</body>
</html>
